<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格的增删改查-两个模态框版本</title>
	<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>

</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg addTable" data-toggle="modal" data-target="#myModalAdd">
	新增
</button>
<!--表格部分-->
<div>
	<table class="table table-hover table-striped">
		<thead>
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>1</td>
			<td>张开</td>
			<td>18</td>
			<td>
				<button class="btn btn-danger btn-sm delTable">删除</button>
				<button class="btn btn-info btn-sm editTable">编辑</button>
			</td>
		</tr>
		<tr>
			<td>2</td>
			<td>李开</td>
			<td>18</td>
			<td>
				<button class="btn btn-danger btn-sm delTable">删除</button>
				<button class="btn btn-info btn-sm editTable">编辑</button>
			</td>
		</tr>
		<tr>
			<td>3</td>
			<td>王开</td>
			<td>18</td>
			<td>
				<button class="btn btn-danger btn-sm delTable">删除</button>
				<button class="btn btn-info btn-sm editTable">编辑</button>
			</td>
		</tr>
		</tbody>
	</table>
</div>
<!-- 新增Modal -->
<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">新增</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="userName">姓名</label>
					<input type="text" class="form-control" id="userName" placeholder="username">
				</div>
				<div class="form-group">
					<label for="age">姓名</label>
					<input type="text" class="form-control" id="age" placeholder="age">
				</div>
			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary addSave" data-dismiss="modal">保存</button>
			</div>
		</div>
	</div>
</div>

<!-- 编辑Modal -->
<div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalEditLabel">编辑</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="editUserName">姓名</label>
					<input type="text" class="form-control" id="editUserName" placeholder="username">
				</div>
				<div class="form-group">
					<label for="editAge">姓名</label>
					<input type="text" class="form-control" id="editAge" placeholder="age">
				</div>
			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary editSave">保存</button>
			</div>
		</div>
	</div>
</div>


<pre>
新增的需求：
	点击新增按钮，弹出一个模态框
	模态框中的input框的值需要手动的清理掉(默认，input框输入值，如果不刷新，值一直在)
	点击取消(close)按钮，关闭模态框，其它的什么也不做(不会修改任何数据)
编辑的需求：
	点击某一行的编辑按钮，弹出一个模态框，并且需要获取当前行的姓名和年龄，取出来，放到模态框中的input框中
	当用户修改之后，点击模态框的保存按钮，就将用户修改后的input框的值取出来，再覆盖到原来的(要编辑)行上去。
	重点：在点击保存按钮的时候，如何确定要覆盖到哪一行
	点击取消(close)按钮，关闭模态框，其它的什么也不做(不会修改任何数据)
删除的需求：
	点击某一行的删除按钮，就直接将当前行删掉
	然后再手动的整理下各个行的序号，要保证操作之后，剩余的各个行的序号还是有序的
bootstrap3的模态框：https://v3.bootcss.com/javascript/#modals
	有两种开启关闭方式：
		方式1，通过属性来
			点击新增按钮，需要给这个按钮设置两个属性开启模态框
				data-toggle="modal" data-target="#myModalAdd"
			关闭模态框，就是为点击的按钮设置 data-dismiss="modal" 属性，来达到关闭模态框的目的
		方式2，通过js代码
			为新增按钮绑定一个click事件，在事件内部，写 $('#myModal').modal("show");
			关闭模态框，就是为点击的按钮绑定一个click事件，在事件内部，写 $('#myModal').modal("hide");
</pre>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
	// 点击新增按钮，弹出模态框，当用户输入数据之后，拿到数据，并生成一行，放到表格中
	$('.addTable').click(function () {
		//开启和关闭模态框，都有属性来干了，这里我们不需要处理了
		$("#userName").val("");
		$("#age").val("");
	});
	$(".addSave").click(function () {
		// 获取用户名和年龄
		var name = $("#userName").val();
		var age = $("#age").val();
		var num = $("tbody tr").length + 1;
		// console.log(111, name, age, num);
		var tr = `<tr>
					<td>${num}</td>
					<td>${name}</td>
					<td>${age}</td>
					<td>
						<button class="btn btn-danger btn-sm delTable">删除</button>
						<button class="btn btn-info btn-sm editTable">编辑</button>
					</td>
				</tr>`
		$("tbody").append(tr);
	});
	// 编辑
	$("tbody").on('click', '.editTable',function () {
		// 根据编辑按钮，找到父标签的兄弟标签(name,age)，获取到其中的值，然后放到模态框中的input框中
		// var name = $(this).parent().siblings().eq(1).text();  // 找兄弟
		var name = $(this).parent().parent().children().eq(1).text();  // 找儿子
		// var age = $(this).parent().siblings().eq(2).text();
		var age = $(this).parent().parent().children().eq(2).text();
		// console.log(222, name, age);
		// 将值添加到input框中去
		$("#editUserName").val(name);
		$("#editAge").val(age);

		// 为当前行加标记(这里以给tr标签添加属性为例)
		$(this).parent().parent().addClass('currentTr').siblings().removeClass('currentTr');

		// 展示模态框
		$('#myModalEdit').modal("show");
	});
	// 编辑保存
	$(".editSave").click(function () {
		var name = $("#editUserName").val();
		var age = $("#editAge").val();
		// console.log(333, name,age);
		$(".currentTr").children().eq(1).text(name);
		$(".currentTr").children().eq(2).text(age);
		$(".currentTr").removeClass('currentTr');

		// 关闭模态框
		$('#myModalEdit').modal("hide");
	})
	// 删除
	$("tbody").on('click', '.delTable', function () {
		$(this).parent().parent().remove();
		$("tbody tr td:first-child").each(function (index) {
			// console.log(444, $(this).text(), index);
			$(this).text(index + 1);
		})
	})
</script>
</html>